import axios from "axios";
import React, {useEffect, useState} from 'react';
import './CreateCamping.css';
import {App, Button, Divider, Flex, Image, Input, Space, Spin} from "antd"
import {useNavigate, useParams} from "react-router-dom";
import config from '../utils/config'
import {MultiMarker, TMap} from '@map-component/react-tmap';

function CreateCamping() {
    const {notification} = App.useApp();
    const navigate = useNavigate();
    const [camping, setCamping] = useState(null);
    const [remark, setRemark] = useState('');
    const params = useParams();

    useEffect(() => {
        axios.get(`${config.serverDomain}/camping/${params.id}`)
            .then(res => setCamping(res.data))
    }, [])

    //审核通过函数
    const reviewPass = (e) => {
        axios.post(`${config.serverDomain}/admin/camping/review/create`, {
            campingId: camping.id,
            pass: true,
            remark
        }).then(res => {
            console.log(res)
            if (res.status === 200) {
                navigate(-1)
            } else {
                notification.info({
                    message: res.data
                });
            }
        })
    }
    //审核拒绝函数
    const reviewReject = (e) => {
        if (remark === '') {
            console.info(notification)
            notification.info({
                message: `审核备注不能为空`
            });
            return;
        }
        axios.post(`${config.serverDomain}/camping/review/create`, {
            campingId: camping.id,
            pass: false,
            remark
        }).then(res => {
            if (res.status === 200) {
                navigate(-1)
            } else {
                notification.info({
                    message: res.data
                });
            }
        })
    }

    let mapStyle = {height: '300px', width: '800px'}
    if (window.innerWidth < 1000) {
        mapStyle = {height: '150px', width: '300px'}
    }

    if (!camping) {
        return <Spin size="large"/>
    } else {
        return <div style={{margin: '0px 20px'}}>
            <Info title="营地名" desc={camping.name}/>
            <Info title="营地地址" desc={
                <div>
                    <div>{camping.addressName}</div>
                    <TMap
                        style={mapStyle}
                        scale={0.5}
                        mapKey="7F7BZ-V3Y3H-77ND7-W4MSU-UQDY6-TUFJG" // The applied key
                        center={{lat: camping.latitude, lng: camping.longitude}} // set the center point coordinates
                        control={{
                            scale: false,
                            rotate: false,
                        }}
                    >
                        <MultiMarker
                            id={camping.id}
                            geometries={[
                                {
                                    position: {lat: camping.latitude, lng: camping.longitude}
                                }
                            ]}
                        />
                    </TMap>
                </div>
            }/>
            <Info title="类型" desc={camping.type}/>

            <Info title="图片" desc={camping.images.map(img => <Image
                key={img}
                width={150}
                src={config.ftpDomain + img}
                fallback="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
            />)}/>

            <Info title="配套" desc={camping.facilities.join('，')}/>

            <Info title="特色" desc={camping.labels.join('，')}/>

            <Info title="环境" desc={camping.environments.join('，')}/>

            <Info title="电话" desc={camping.phone}/>
            <Info title="联系方式" desc={camping.contact}/>

            <Info title="周边" desc={camping.surroundings.join('，')}/>

            <Divider/>

            <Info title="创建人" desc={camping.createdBy}/>

            <div style={{marginBottom: '10px'}}>
                <div className='title'>审核备注</div>
                <Input placeholder="会在微信消息里展示给用户，通过时可不填" value={remark} onChange={e => setRemark(e.target.value)}/>
            </div>
            <Flex justify="center">
                <Space>
                    <Button type="primary" onClick={reviewPass}>审核通过</Button>
                    <Button danger onClick={reviewReject}>审核拒绝</Button>
                </Space>
            </Flex>
        </div>
    }
}

function Info({title, desc}) {
    return <div>
        <div className="title">
            {title}
        </div>
        <div className="desc">
            {desc}
        </div>
    </div>
}

export default CreateCamping;
